<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-8">
    <div class="container mx-auto px-4 max-w-4xl">
      <div class="mb-8">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-2">添加MCP Server </h1>
        <p class="text-gray-600 dark:text-gray-300">
          添加新的MCP Server 到MCPRepoMarket平台，与社区分享你的 Server 
        </p>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
        <form @submit.prevent="submitForm" class="p-6 space-y-6">
          <!-- 基本信息 -->
          <div>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">基本信息</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <!--  Server 名称 -->
              <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                   Server 名称 *
                </label>
                <input
                  id="name"
                  v-model="form.name"
                  type="text"
                  required
                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                />
              </div>

              <!-- 中文名称 -->
              <div>
                <label for="name_cn" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  中文名称
                </label>
                <input
                  id="name_cn"
                  v-model="form.name_cn"
                  type="text"
                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                />
              </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <!-- 提供者 -->
              <div>
                <label for="provider" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  提供者 *
                </label>
                <input
                  id="provider"
                  v-model="form.provider"
                  type="text"
                  required
                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                />
              </div>

              <!-- 图标URL -->
              <div>
                <label for="icon" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  图标URL
                </label>
                <input
                  id="icon"
                  v-model="form.icon"
                  type="url"
                  placeholder="https://example.com/icon.png"
                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                />
              </div>
            </div>

            <!-- 描述 -->
            <div class="mt-6">
              <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                描述 *
              </label>
              <textarea
                id="description"
                v-model="form.description"
                rows="3"
                required
                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
              ></textarea>
            </div>

            <!-- 中文描述 -->
            <div class="mt-6">
              <label for="description_cn" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                中文描述
              </label>
              <textarea
                id="description_cn"
                v-model="form.description_cn"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
              ></textarea>
            </div>

            <!-- 分类 -->
            <div class="mt-6">
              <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                分类 *
              </label>
              <div class="flex flex-wrap gap-2">
                <input
                  id="category"
                  v-model="categoryInput"
                  type="text"
                  placeholder="输入分类后按回车添加"
                  class="flex-grow px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  @keydown.enter.prevent="addCategory"
                />
                <button 
                  type="button"
                  @click="addCategory"
                  class="px-3 py-2 bg-blue-600 text-white rounded-md"
                >
                  添加
                </button>
              </div>
              <div class="mt-2 flex flex-wrap gap-2">
                <span 
                  v-for="(cat, index) in form.category" 
                  :key="index"
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
                >
                  {{ cat }}
                  <button 
                    type="button" 
                    @click="removeCategory(index)" 
                    class="ml-1 text-blue-600 hover:text-blue-800 focus:outline-none"
                  >
                    &times;
                  </button>
                </span>
              </div>
            </div>

            <!-- 中文分类 -->
            <div class="mt-6">
              <label for="category_cn" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                中文分类
              </label>
              <div class="flex flex-wrap gap-2">
                <input
                  id="category_cn"
                  v-model="categoryCnInput"
                  type="text"
                  placeholder="输入中文分类后按回车添加"
                  class="flex-grow px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  @keydown.enter.prevent="addCategoryCn"
                />
                <button 
                  type="button"
                  @click="addCategoryCn"
                  class="px-3 py-2 bg-blue-600 text-white rounded-md"
                >
                  添加
                </button>
              </div>
              <div class="mt-2 flex flex-wrap gap-2">
                <span 
                  v-for="(cat, index) in form.category_cn" 
                  :key="index"
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
                >
                  {{ cat }}
                  <button 
                    type="button" 
                    @click="removeCategoryCn(index)" 
                    class="ml-1 text-green-600 hover:text-green-800 focus:outline-none"
                  >
                    &times;
                  </button>
                </span>
              </div>
            </div>

            <!-- 标签 -->
            <div class="mt-6">
              <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                标签
              </label>
              <div class="flex flex-wrap gap-2">
                <input
                  id="tags"
                  v-model="tagInput"
                  type="text"
                  placeholder="输入标签后按回车添加"
                  class="flex-grow px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  @keydown.enter.prevent="addTag"
                />
                <button 
                  type="button"
                  @click="addTag"
                  class="px-3 py-2 bg-blue-600 text-white rounded-md"
                >
                  添加
                </button>
              </div>
              <div class="mt-2 flex flex-wrap gap-2">
                <span 
                  v-for="(tag, index) in form.tags" 
                  :key="index"
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
                >
                  {{ tag }}
                  <button 
                    type="button" 
                    @click="removeTag(index)" 
                    class="ml-1 text-purple-600 hover:text-purple-800 focus:outline-none"
                  >
                    &times;
                  </button>
                </span>
              </div>
            </div>

            <!--  Server 类型 -->
            <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  内部/外部 Server  *
                </label>
                <div class="flex space-x-4">
                  <div class="flex items-center">
                    <input
                      id="type-public"
                      v-model="form.is_internal"
                      :value="false"
                      type="radio"
                      name="server-type"
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <label for="type-public" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                      开源 Server 
                    </label>
                  </div>
                  <div class="flex items-center">
                    <input
                      id="type-internal"
                      v-model="form.is_internal"
                      :value="true"
                      type="radio"
                      name="server-type"
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <label for="type-internal" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                      企业内部 Server 
                    </label>
                  </div>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  是否官方 Server 
                </label>
                <div class="flex space-x-4">
                  <div class="flex items-center">
                    <input
                      id="official-false"
                      v-model="form.is_official"
                      :value="false"
                      type="radio"
                      name="server-official"
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <label for="official-false" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                      非官方
                    </label>
                  </div>
                  <div class="flex items-center">
                    <input
                      id="official-true"
                      v-model="form.is_official"
                      :value="true"
                      type="radio"
                      name="server-official"
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <label for="official-true" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                      官方
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <!-- 来源信息 -->
            <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label for="from_site" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  来源网站
                </label>
                <input
                  id="from_site"
                  v-model="form.from_site"
                  type="text"
                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                />
              </div>
              <div>
                <label for="from_site_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  来源网站URL
                </label>
                <input
                  id="from_site_url"
                  v-model="form.from_site_url"
                  type="url"
                  placeholder="https://example.com"
                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                />
              </div>
            </div>

            <!-- 华为内部使用文档 -->
            <div class="mt-6">
              <label for="internal_doc_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                华为内部使用文档URL
              </label>
              <input
                id="internal_doc_url"
                v-model="form.internal_doc_url"
                type="url"
                placeholder="https://example.com/internal-doc"
                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
              />
              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                华为内部员工使用的文档链接，如果有的话请填写
              </p>
            </div>
          </div>

          <!-- 技术信息 -->
          <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">技术信息</h2>
            <!-- 开发语言 -->
            <div class="mt-6">
              <label for="language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                开发语言
              </label>
              <div class="flex flex-wrap gap-2">
                <input
                  id="language"
                  v-model="languageInput"
                  type="text"
                  placeholder="输入语言后按回车添加"
                  class="flex-grow px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  @keydown.enter.prevent="addLanguage"
                />
                <button 
                  type="button"
                  @click="addLanguage"
                  class="px-3 py-2 bg-blue-600 text-white rounded-md"
                >
                  添加
                </button>
              </div>
              <div class="mt-2 flex flex-wrap gap-2">
                <span 
                  v-for="(lang, index) in form.language" 
                  :key="index"
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
                >
                  {{ lang }}
                  <button 
                    type="button" 
                    @click="removeLanguage(index)" 
                    class="ml-1 text-yellow-600 hover:text-yellow-800 focus:outline-none"
                  >
                    &times;
                  </button>
                </span>
              </div>
            </div>

            <!-- 鉴权方式 -->
            <div class="mt-6">
              <label for="auth_method" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                鉴权方式
              </label>
              <select
                id="auth_method"
                v-model="form.auth_method"
                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
              >
                <option value="">选择鉴权方式</option>
                <option value="API Key">API Key</option>
                <option value="OAuth">OAuth</option>
                <option value="JWT">JWT</option>
                <option value="无需鉴权">无需鉴权</option>
                <option value="其他">其他</option>
              </select>
            </div>

            <!-- 服务器配置 -->
            <div class="mt-6">
              <label for="server_config" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                服务器配置
              </label>
              <textarea
                id="server_config"
                v-model="form.server_config"
                rows="4"
                placeholder="server:\n  host: 0.0.0.0\n  port: 8000"
                class="w-full px-3 py-2 font-mono text-sm border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
              ></textarea>
            </div>
            
            <!-- 环境变量配置 -->
            <div class="mt-6">
              <div class="flex justify-between items-center mb-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                  环境变量配置
                </label>
                <button 
                  type="button"
                  @click="addEnvVariable"
                  class="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                >
                  <svg class="w-5 h-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                  </svg>
                  添加环境变量
                </button>
              </div>
              
              <div v-if="Object.keys(form.env_schema).length === 0" class="text-center py-4 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-md">
                点击"添加环境变量"按钮添加环境变量配置
              </div>
              
              <div v-else class="space-y-4">
                <div 
                  v-for="(schema, key) in form.env_schema" 
                  :key="key"
                  class="border border-gray-200 dark:border-gray-700 rounded-md p-4"
                >
                  <div class="flex justify-between items-start mb-2">
                    <h3 class="font-medium text-gray-900 dark:text-white">{{ key }}</h3>
                    <button 
                      type="button" 
                      @click="removeEnvVariable(key)"
                      class="text-red-500 hover:text-red-700"
                    >
                      <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                      </svg>
                    </button>
                  </div>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label :for="`env-type-${key}`" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        类型
                      </label>
                      <select
                        :id="`env-type-${key}`"
                        v-model="schema.type"
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                      >
                        <option value="string">String</option>
                        <option value="number">Number</option>
                        <option value="boolean">Boolean</option>
                        <option value="array">Array</option>
                        <option value="object">Object</option>
                      </select>
                    </div>
                    <div>
                      <label :for="`env-desc-${key}`" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        描述
                      </label>
                      <input
                        :id="`env-desc-${key}`"
                        v-model="schema.description"
                        type="text"
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- README -->
          <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">README文档</h2>
            <div>
              <label for="readme" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                README内容 (Markdown格式)
              </label>
              <textarea
                id="readme"
                v-model="form.readme"
                rows="8"
                class="w-full px-3 py-2 font-mono text-sm border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
              ></textarea>
              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                支持Markdown格式，可以添加标题、列表、代码等
              </p>
            </div>
          </div>

          <!-- 中文README -->
          <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">中文README文档</h2>
            <div>
              <label for="readme_cn" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                中文README内容 (Markdown格式)
              </label>
              <textarea
                id="readme_cn"
                v-model="form.readme_cn"
                rows="8"
                class="w-full px-3 py-2 font-mono text-sm border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
              ></textarea>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="pt-6 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-4">
            <router-link 
              to="/servers" 
              class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              取消
            </router-link>
            <button 
              type="submit"
              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              :disabled="loading"
            >
              <span v-if="loading" class="flex items-center">
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                提交中...
              </span>
              <span v-else>提交</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { createServer } from '@/api/server'

const router = useRouter()
const loading = ref(false)
const error = ref<string | null>(null)

// 用于输入的临时变量
const categoryInput = ref('')
const categoryCnInput = ref('')
const tagInput = ref('')
const languageInput = ref('')
const envVariableKey = ref('')

// 表单数据
const form = reactive({
  name: '',
  name_cn: '',
  icon: '',
  provider: '',
  description: '',
  description_cn: '',
  category: [] as string[],
  category_cn: [] as string[],
  tags: [] as string[],
  is_official: false,
  is_internal: false,
  auth_method: '',
  language: [] as string[],
  from_site: '',
  from_site_url: '',
  internal_doc_url: '',
  server_config: '',
  env_schema: {} as Record<string, { type: string; description: string }>,
  tools: [] as any[],
  readme: '',
  readme_cn: '',
  verified: false
})

// 添加分类
const addCategory = () => {
  if (categoryInput.value.trim() && !form.category.includes(categoryInput.value.trim())) {
    form.category.push(categoryInput.value.trim())
    categoryInput.value = ''
  }
}

// 删除分类
const removeCategory = (index: number) => {
  form.category.splice(index, 1)
}

// 添加中文分类
const addCategoryCn = () => {
  if (categoryCnInput.value.trim() && !form.category_cn.includes(categoryCnInput.value.trim())) {
    form.category_cn.push(categoryCnInput.value.trim())
    categoryCnInput.value = ''
  }
}

// 删除中文分类
const removeCategoryCn = (index: number) => {
  form.category_cn.splice(index, 1)
}

// 添加标签
const addTag = () => {
  if (tagInput.value.trim() && !form.tags.includes(tagInput.value.trim())) {
    form.tags.push(tagInput.value.trim())
    tagInput.value = ''
  }
}

// 删除标签
const removeTag = (index: number) => {
  form.tags.splice(index, 1)
}

// 添加语言
const addLanguage = () => {
  if (languageInput.value.trim() && !form.language.includes(languageInput.value.trim())) {
    form.language.push(languageInput.value.trim())
    languageInput.value = ''
  }
}

// 删除语言
const removeLanguage = (index: number) => {
  form.language.splice(index, 1)
}

// 添加环境变量
const addEnvVariable = () => {
  const key = prompt('请输入环境变量名称:')
  if (key && !form.env_schema[key]) {
    form.env_schema[key] = {
      type: 'string',
      description: ''
    }
  }
}

// 删除环境变量
const removeEnvVariable = (key: string) => {
  const { [key]: _, ...rest } = form.env_schema
  form.env_schema = rest
}

// 提交表单
const submitForm = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await createServer(form)
    
    // 提交成功，跳转到详情页
    router.push(`/servers/${response.id}`)
  } catch (err: any) {
    console.error('提交失败:', err)
    error.value = err.response?.data?.message || '提交失败，请稍后再试'
    alert('提交失败: ' + error.value)
  } finally {
    loading.value = false
  }
}
</script> 